<h2 class="h4 clrT"><%= ob.polyT('settings.addresses.sectionName') %></h2>
<form class="padKids padStack contentBox pad rowMd clrP border clrBr js-addAddressForm">
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressName" class="required"><%= ob.polyT('settings.addresses.name') %></label>
    </div>
    <div class="col6">
      <% if (ob.errors.name) print(ob.formErrorTmpl({ errors: ob.errors.name })) %>
      <input type="text" class="clrBr clrSh2" name="name" id="settingsAddressName" value="<%= ob.name %>" placeholder="<%= ob.polyT('settings.addressesTab.placeholderName') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressCompany"><%= ob.polyT('settings.addresses.company') %></label>
    </div>
    <div class="col6">
      <% if (ob.errors.company) print(ob.formErrorTmpl({ errors: ob.errors.company })) %>
      <input type="text" class="clrBr clrSh2" name="company" id="settingsAddressCompany" value="<%= ob.company %>" placeholder="<%= ob.polyT('settings.optional') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressLineOne"><%= ob.polyT('settings.addresses.street') %></label>
    </div>
    <div class="col6">
      <% if (ob.errors.addressLineOne) print(ob.formErrorTmpl({ errors: ob.errors.addressLineOne })) %>
      <input type="text" class="clrBr clrSh2" name="addressLineOne" id="settingsAddressLineOne" value="<%= ob.addressLineOne %>"  placeholder="<%= ob.polyT('settings.addressesTab.placeholderAddress') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressLineTwo"><%= ob.polyT('settings.addresses.apt') %></label>
    </div>
    <div class="col3">
      <% if (ob.errors.addressLineTwo) print(ob.formErrorTmpl({ errors: ob.errors.addressLineTwo })) %>
      <input type="text" class="clrBr clrSh2" name="addressLineTwo" id="settingsAddressLineTwo" value="<%= ob.addressLineTwo %>" placeholder="<%= ob.polyT('settings.optional') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressCity"><%= ob.polyT('settings.addresses.city') %></label>
    </div>
    <div class="col6">
      <% if (ob.errors.city) print(ob.formErrorTmpl({ errors: ob.errors.city })) %>
      <input type="text" class="clrBr clrSh2" name="city" id="settingsAddressCity" value="<%= ob.city %>" placeholder="<%= ob.polyT('settings.addressesTab.placeholderCity') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressState"><%= ob.polyT('settings.addresses.state') %></label>
    </div>
    <div class="col6">
      <% if (ob.errors.state) print(ob.formErrorTmpl({ errors: ob.errors.state })) %>
      <input type="text" class="clrBr clrSh2" name="state" id="settingsAddressState" value="<%= ob.state %>" placeholder="<%= ob.polyT('settings.addressesTab.placeholderState') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressPostalCode"><%= ob.polyT('settings.addresses.postalCode') %></label>
    </div>
    <div class="col3">
      <% if (ob.errors.postalCode) print(ob.formErrorTmpl({ errors: ob.errors.postalCode })) %>
      <input type="text" class="clrBr clrSh2" name="postalCode" id="settingsAddressPostalCode" value="<%= ob.postalCode %>" placeholder="<%= ob.polyT('settings.addressesTab.placeholderPostalCode') %>" />
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressCountry" class="required"><%= ob.polyT('settings.addresses.country') %></label>
    </div>
    <div class="col6 clrSh2">
      <% if (ob.errors.country) print(ob.formErrorTmpl({ errors: ob.errors.country })) %>
      <select id="settingsAddressCountry" name="country">
        <% ob.countryList.forEach((country) => { %>
        <option value="<%= country.dataName %>" <% if (country.dataName == ob.country) print('selected') %>><%= country.name %></option>
        <% }); %>
      </select>
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="settingsAddressNotes"><%= ob.polyT('settings.addresses.notes') %></label>
    </div>
    <div class="col9">
      <% if (ob.errors.addressNotes) print(ob.formErrorTmpl({ errors: ob.errors.addressNotes })) %>
      <textarea rows="6" name="addressNotes" class="clrBr clrSh2" id="settingsAddressNotes" placeholder="<%= ob.polyT('settings.addressesTab.placeholderNotes') %>"><%= ob.addressNotes %></textarea>
    </div>
  </div>
</form>
